const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
const webpack = require('webpack')
const path = require('path')

const NODE_ENV = process.env.NODE_ENV
const development = NODE_ENV !== 'production'

function resolve (folder) {
  return path.join(__dirname, folder)
}

module.exports = {
  entry: {
    app: './src/main.js'
  },
  output: {
    publicPath: development ? '/' : '/h5/',
    filename: development ? 'js/[name].js' : 'js/[name].[hash:7].js',
    path: resolve('dist')
  },
  mode: NODE_ENV,
  devServer: {
    host: 'localhost',
    // host: '192.168.1.2',
    historyApiFallback: true,
    noInfo: false
  },
  optimization: {
    runtimeChunk: false,
    splitChunks: {
      cacheGroups: {
        styles: {
          name: 'styles',
          test: /\.css$/,
          chunks: 'async',
          enforce: true
        }
      }
    },
    minimizer: [
      new UglifyJsPlugin({
        sourceMap: false, // set to true if you want JS source maps
        parallel: true,
        cache: true
      }),
      new OptimizeCSSAssetsPlugin({})
    ]
  },
  resolve: {
    extensions: ['.js', '.vue', '.json']
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude (file) {
          if (/vant/.test(file)) {
            return false
          }
          return /node_modules/.test(file) || /\.vue\.js/.test(file)
        }
      },
      {
        test: /\.(sa|sc|c)ss$/,
        use: [
          development ? 'vue-style-loader' : MiniCssExtractPlugin.loader,
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              ident: 'postcss',
              plugins: (loader) => [
                require('postcss-import')({root: loader.resourcePath}),
                require('postcss-preset-env')(),
                require('cssnano')()
              ]
            }
          },
          'sass-loader'
        ]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              name: 'img/[name].[hash:7].[ext]',
              limit: 8192
            }
          }
        ]
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          name: 'fonts/[name].[hash:7].[ext]',
          limit: 8192
        }
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: development ? '[name].css' : '[name].[hash:7].css',
      chunkFilename: development ? '[id].css' : '[id].[hash:7].css'
    }),
    new webpack.DefinePlugin({
      'process.env': {
        isStaging: (NODE_ENV === 'development' || NODE_ENV === 'staging'),
        NODE_ENV: '"' + NODE_ENV + '"'
      }
    }),
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: 'index.html',
      favicon: 'favicon.ico',
      chunksSortMode: 'none',
      inject: true
    })
  ]
}
